jQuery — Offsets and Only Child

jQuery is a popular JavaScript for creating dynamic web pages.

In this article, we’ll look at how to using jQuery in our web apps.

.offset()

The .offset() method gets the current coordinates of the first element in the set of matched elements relative to the document.

For example, if we have:

<p>Hello</p>
<p>2nd Paragraph</p>

Then we can get the last p element’s offset by writing:

const p = $("p").last();
const offset = p.offset();
console.log(offset);

Then we get:

{
  "top": 50,
  "left": 8
}

as the value of offset .

.offsetParent()

The .offsetParent() method gets the closes ancestor element that’s positioned.

For example, if we have:

<ul class="level-1">
  <li class="item-i">I</li>
  <li class="item-ii" style="position: relative;">II
    <ul class="level-2">
      <li class="item-a">A</li>
      <li class="item-b">B
        <ul class="level-3">
          <li class="item-1">1</li>
          <li class="item-2">2</li>
          <li class="item-3">3</li>
        </ul>
      </li>
      <li class="item-c">C</li>
    </ul>
  </li>
  <li class="item-iii">III</li>
</ul>

Then we get the li with class item-a ‘s parent with the offsetParent method and add a background to it by writing:

$("li.item-a").offsetParent().css("background-color", "red");

.on()

The .on() method attaches an event handler function for one or more events to the selected elements.

For example, if we have:

<p>Has an attached custom event.</p>
<button>Trigger custom event</button>
<span style="display:none;"></span>

Then we can trigger a custom event when we click on the button by writing:

$("p").on("myCustomEvent", function(event, myName) {
  $(this).text(`${myName}, hi there`);
  $("span")
    .stop()
    .css("opacity", 1)
    .text(`myName = ${myName}`)
    .fadeIn(30)
    .fadeOut(1000);
});

$("button").click(function() {
  $("p").trigger("myCustomEvent", ["John"]);
});

We call trigger with the event name as the first argument and the data we want to send with the event in an array.

To listen to the myCustomEvent event, we call on with the same event name as the first argument.

The 2nd argument is a callback that runs when the event is triggered.

myName is 'John' so we see that added to the p element.

.one()

The .one() method attaches a handler to an event for the elements.

The handler is run at most once per element per event type.

For example, if we have:

<p id='foo'>foo</p>

Then we write:

$("#foo").one("click mouseover", function(event) {
  alert("The " + event.type + " event happened!");
});

to add a listener for the click and mouseover events on the p element wiuth ID foowith the one method.

:only-child Selector

The :only-child selector selects all elements that are the only child of their parent.

For example, if we have:

<div>
  <button>Sibling</button>
  <button>Sibling</button>
</div>

<div>
  <button>Sibling</button>
</div>

<div>
  None
</div>

<div>
  <button>Sibling</button>
  <button>Sibling</button>
  <button>Sibling</button>
</div>

<div>
  <button>Sibling</button>
</div>

Then we add a border and change the text of the buttons that are the only in the div by writing:

$("div button:only-child").text("Alone").css("border", "2px blue solid");

So the 2nd and last div will have the text changed and the border added.

Conclusion

We can add event listeners and get the only child element in an element with jQuery.